<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    *{padding: 0; margin: 0; list-style-type: none;}
    .conte{ width: 500px; height: 900px; background-color: #000; margin: 0 auto; display: grid; grid-template-columns: 1fr; grid-template-rows:repeat(3,minmax(300px,1fr)); overflow: hidden;}
    .conte .box{ width: 100%; background-color: #eee;border-bottom: 1px solid #000;  animation: uplists 6s ease-out  infinite; animation-delay: calc(var(--i));}
    /* .conte .box:last-child{ animation-delay: calc(-3s * var(--i));} */
    .conte .box span{ display: block; width: 100%; height: 100%; background-color:red;}


    @keyframes uplists {
        0% {
            transform: translateY(100%) scale(0.5);
            opacity: 0.2;
        }
        20% {
            transform: translateY(100%) scale(0.7);
            opacity: 0.4;
        }
        50% {
            transform: translateY(0) scale(1);
            opacity: 0.8;
            z-index: 1;
            pointer-events: auto;
        }
        80% {
            transform: translateY(-100%) scale(0.7);
            opacity: 0.4;
        }
        100% {
            transform: translateY(-100%) scale(0.5);
            opacity: 0.2;
        }
    }
</style>
<body>
    <div class="conte">
          <div class="box" style="--i:1;">
               <span>1</span>
          </div>
          <div class="box" style="--i:2;">
               <span>2</span>
          </div>
          <div class="box" style="--i:3;">
               <span>3</span>
          </div>

    </div>
</body>
</html>